<template>
  <div class="weui-tabbar">
    <a href="javascript:;" class="weui-tabbar__item" :class="{'weui-bar__item_on': isHome}" @click="toggleView('home')">
      <i class="weui-tabbar__icon icon_home" :class="{'icon_on': isHome}"></i>
      <p class="weui-tabbar__label">首页</p>
    </a>
    <a href="javascript:;" class="weui-tabbar__item" :class="{'weui-bar__item_on': isMine}" @click="toggleView('mine')">
      <i class="weui-tabbar__icon icon_mine" :class="{'icon_on': isMine}"></i>
      <p class="weui-tabbar__label">我</p>
    </a>
  </div>
</template>
<style>
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
    color: rgb(14, 119, 229);
  }
  .weui-tabbar__icon{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .icon_home{
    background-image: url(../assets/barBottom/home_off.png);
  }
  .icon_home.icon_on{
    background-image: url(../assets/barBottom/home_on.png);
  }
  .icon_mine{
    background-image: url(../assets/barBottom/me_off.png);
  }
  .icon_mine.icon_on{
    background-image: url(../assets/barBottom/me_on.png);
  }
</style>
<script>
  export default{
    data () {
      return {
        isHome: true,
        isMine: false
      }
    },
    methods: {
      toggleView: function (type) {
        if (this.isHome && type === 'home' || this.isMine && type === 'mine') {
          return
        }
        this.isHome = !this.isHome
        this.isMine = !this.isMine
      }
    }
  }
</script>
